﻿@{
    ViewBag.MainMenu = "Settings";
    ViewBag.LeftMenu = "Material";

    ViewBag.Title = "图片库";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@*@Scripts.Render("~/Scripts/jquery.form.js")*@


<script language="javascript">

    //当前页
    var _currentPage = 1;

    $(document).ready(function () {
        loadData();
    });

    function loadData(targetPage) {
        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        var args = new Object();
        args.Page = targetPage || 1;
        args.Type = "image";

        $.ajax({
            url: "/Api/Material/GetNormalMaterialList",
            type: "POST",
            dataType: "json",
            data: JSON.stringify(args),
            success: function (data, status, jqXHR) {
                // alert(data);

                layer.close(loadLayerIndex);
                if (data.Success) {
                    var resultObj = data.Data;

                    _currentPage = resultObj.Page;

                    //alert(JSON.stringify(resultObj));
                    var gettpl = document.getElementById('tableTemplate').innerHTML;
                    laytpl(gettpl).render(resultObj.ItemList, function (html) {
                        document.getElementById('divTableBodyContainer').innerHTML = html;
                        //fitTable();
                    });

                    laypage({
                        skin: 'yahei',
                        cont: document.getElementById('divPagingContainer'),
                        pages: resultObj.TotalPage, //总页数
                        curr: resultObj.Page, //当前页
                        groups: 7, //连续显示分页数
                        jump: function (obj, first) {
                            if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                                loadData(obj.curr);
                            }
                        }
                    });

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }


    function uploadFile() {

        fileUploadArgs = new Object();
        fileUploadArgs.uploadMethod = "UploadToWeixinMaterial";
        fileUploadArgs.getUploadResultApi = "/Api/Settings/GetUploadToWeixinMaterialResult?fileId={0}&type=image";

        __showFileUpload(getUploadResult, fileUploadArgs);
    }

    function getUploadResult(fileServiceAddress, result) {

        if (result.Success) {
            window.location.reload();
        }

        //var url = __fileServiceAddress + result.StoreFilePath;
        //alert(url);
    }

    function removeData(id,mediaId)
    {
        var confirmLayerIndex = layer.confirm("是否确认删除该素材？", {
            btn: ['确认', '取消'], //按钮
            shade: [0.4, '#393D49'],
            title: false,
            closeBtn: false,
            shift: _layerShift
        }, function ()
        {
            layer.close(confirmLayerIndex);

            var loadLayerIndex = layer.load(0, {
                shade: [0.2, '#fff']
            });

            $.ajax({
                url: "/Api/Material/RemoveNormalMaterial?id=" + id + "&mediaId=" + mediaId,
                type: "POST",
                dataType: "json",
                success: function (data, status, jqXHR)
                {
                    layer.close(loadLayerIndex);
                    if (data.Success)
                    {
                        loadData(_currentPage);

                    } else
                    {
                        layerAlert(data.Message);
                    }
                },
                error: function (xmlHttpRequest)
                {
                    layer.close(loadLayerIndex);
                    alert("Error: " + xmlHttpRequest.status);
                }
            });
        });

    }


</script>


<script id="tableTemplate" type="text/html">
    {{# for(var i = 0, len = d.length; i < len; i++){ }}

    <div class="divImageMaterialContainer">
        <table class="tableImageMaterialContainer">
            <tr>
                <td height="150" align="center"><img style="max-width:166px; max-height:100%" src="{{ d[i].Url }}"  /></td>
            </tr>
            <tr>
                <td height="30" style="word-wrap: break-word; word-break: break-all; ">
                    <span class="font_gray_15" style="margin-left: 10px; ">{{ d[i].Name }}</span>
                </td>
            </tr>
            <tr>
                <td height="30" valign="middle" bgcolor="#F4F5F9">
                    <div>
                        @*<div style="float: left; margin-left: 10px;">
                            <img src="/Content/Images/ico_edit.jpg" width="20" height="20">
                        </div>*@
                        <div style="float: right; margin-right: 10px;">
                            <img src="/Content/Images/ico_remove.jpg" width="20" height="20" onclick="removeData('{{ d[i].Id }}','{{ d[i].MediaId }}')">
                        </div>
                        <div style="clear: both"></div>
                    </div>
                </td>
            </tr>
        </table>

    </div>
    {{# } }}

    <div style="clear: both"></div>

</script>



<style type="text/css">
    .divImageMaterialContainer {
        width: 170px;
        float: left;
        margin-right: 20px;
        margin-top: 20px;
        background-color: #FFF;
    }

    .tableImageMaterialContainer {
        width: 100%;
        border-collapse: collapse;
        border: solid #E7E7EB;
        border-width: 1px 0 0 1px;
    }

        .tableImageMaterialContainer td {
            border: 1px solid #E7E7EB;
        }
</style>



<div id="divContentTips">
    图片素材可用来推送消息给会员，上传的图片素材将自动同步到微信后台。
</div>

<div style="margin-top: 20px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="td_ContentTab"><a href="/Material/Article" class="a_black_16">图文消息</a></td>
            <td class="td_ContentTab_active">图片库</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="3" bgcolor="#EEEEEE" height="2"></td>
        </tr>
    </table>
</div>

<div style="margin-left: 20px; margin-right: 20px;">
    <div style="margin-top: 10px;">
        <input name="btnCreate" type="button" class="btn_blue" id="btnCreate" value="上传" onclick="uploadFile()" />
    </div>

    <div id="divTableBodyContainer">

    </div>

</div>

<div id="divPagingContainer" style="margin-top: 20px; text-align: right;">
    
</div>


@Helpers.FileUpload()